<template>
  <div>
    <div class="card-header" >
      <Button type="primary" icon="plus" @click="saveBrand">添加品牌</Button>
    </div>
    <div class="card-body card-padding" >
      <Table border :columns="columns" :data="data"></Table>
    </div>
    <!--新增一级类目-->
    <Modal v-model="addModal" :mask-closable=false loading="loading" width="450"
           title="品牌信息">
      <Form ref="formInline" :label-width="100" :model="brand" :key="brand.id">
        <FormItem label="品牌名称:">
          <Input type="text" :value="brand.name" v-model="brand.name" icon=""></Input>
        </FormItem>
        <FormItem>
          <Button @click="submit" type="primary">确定</Button>
          <Button @click="cancel">取消</Button>
        </FormItem>
      </Form>
      <div slot="footer"></div>
    </Modal>
    <!--结束一级分类-->
  </div>
</template>

<script>
import {getBrands, addBrand, editBrand, deleteBrand} from '../../api/brand/brandApi'
export default {
  name: 'brand',
  data () {
    return {
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          title: '品牌名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '操作',
          key: 'parameter',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.updateBrand(params.row)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.delBrand(params.row.id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [],
      brand: {
        id: '',
        name: ''
      },
      addModal: false
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    saveBrand () {
      this.addModal = true
    },
    updateBrand (param) {
      this.brand = param
      this.addModal = true
    },
    delBrand (id) {
      deleteBrand(id, data => {
        this.loadData()
      })
    },
    submit () {
      let brand = {
        id: '',
        name: ''
      }
      if (this.brand.id === '') {
        let param = this.brand
        addBrand(param, data => {
          this.addModal = false
          this.brand = brand
          this.loadData()
        })
      } else {
        let param = this.brand
        editBrand(param, data => {
          this.addModal = false
          this.brand = brand
          this.loadData()
        })
      }
    },
    cancel () {
      this.addModal = false
    },
    loadData () {
      getBrands(data => {
        this.data = data
        console.log(data)
      })
    }
  }
}
</script>

<style scoped>

</style>
